
<template>
  <div class="system-customer">
    <xr-header />

    <div class="customer-content">
      <div class="system-view-nav">
        <Tree
          :data="categoryData"
          expand="true"
          default-expand-all="true"
          @on-select-change="refreshTask"
        />
      </div>

      <div class="system-view-content">
        <div class="option-bar">
          <el-row type="flex" justify="start" style="margin-left: -25px">
            <el-form
              :inline="true"
              :model="queryForm"
              class="demo-form-inline"
              size="mini"
              style="margin-left: -3%"
            >
              <el-form-item label="类型">
                <el-select
                  v-model="queryForm.type"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="模型名称">
                <el-input v-model="queryForm.modelName" clearable></el-input>
              </el-form-item>
              <el-form-item label="表名">
                <el-input v-model="queryForm.tableName" clearable></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="queryForm.description" clearable></el-input>
              </el-form-item>
              <el-form-item style="margin-left: 26px">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="default" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </el-row>

          <div slot="header" class="clearfix">
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" @click="add('inner')" size="mini"
                  >新增</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button type="success" @click="add('external')" size="mini"
                  >新增外部表</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button type="success" @click="synchronization" size="mini"
                  >导出</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <!-- <data-source
                  :value="multipleSelection"
                  tableName="PANGU_FORM_BUSINESS_MODEL"
                  size="mini"
                ></data-source> -->
              </el-col>
              <el-col :span="1.5">
                <el-upload
                  :action="baseUploadURL"
                  :on-success="handleAvatarSuccess"
                >
                  <el-button size="mini" type="primary">导入</el-button>
                </el-upload>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="cyan"
                  size="mini"
                  :disabled="multiple"
                  @click="handleEs"
                  >同步到ES
                </el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  size="mini"
                  :disabled="multiple"
                  @click="handleDelete"
                  >删除
                </el-button>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-row style="margin-top: 10px">
          <el-col>
            <el-table
              :data="tableData"
              size="mini"
              style="width: 100%"
              :height="tableHeight"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" fixed width="55">
              </el-table-column>
              <el-table-column
                label="序号"
                type="index"
                width="50"
                fixed
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{
                    (queryForm.page - 1) * queryForm.pageSize + scope.$index + 1
                  }}</span>
                </template>
              </el-table-column>

              <el-table-column
                prop="modelName"
                label="实体名"
                width="180"
                show-overflow-tooltip
              />
              <el-table-column
                prop="tableName"
                label="表名"
                show-overflow-tooltip
              />
              <el-table-column
                prop="description"
                label="描述"
                show-overflow-tooltip
              />
              <el-table-column prop="type" label="类型" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.type == 'external'" type="warning"
                    >外部表</el-tag
                  >
                  <el-tag v-else type="success">内部表</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="groupName"
                label="分组"
                show-overflow-tooltip
              />
              <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleClick(scope.row)"
                    >编辑</el-button
                  >
                  <el-divider direction="vertical"></el-divider>

                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelClick(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <div class="p-contianer">
          <el-pagination
            class="p-bar"
            background
            :current-page="queryForm.page"
            :page-size="queryForm.pageSize"
            layout="prev, pager, next, sizes, total, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
.p-contianer {
  position: relative;
  background-color: white;
  height: 44px;
  .p-bar {
    float: right;
    margin: 5px 100px 0 0;
    font-size: 14px !important;
  }
}
.option-bar {
  padding: 15px 20px;
}
.system-customer {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0 15px;
}
.customer-content {
  flex: 1;
  position: relative;
  display: flex;
  overflow: hidden;
}
.system-view-nav {
  min-width: 200px;
  background: #fff;
  margin-right: 10px;
  padding-top: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}
.system-view-content {
  flex: 1;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

// 菜单
.menu-item {
  color: #333;
  font-size: 13px;
  padding: 0 15px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  position: relative;
  .icon-close {
    position: absolute;
    top: 0;
    right: 8px;
    z-index: 1;
    display: none;
  }
}

.menu-item:hover,
.menu-item.is-select {
  background-color: #f6f8fa;
}

.menu-item:hover::before,
.menu-item.is-select::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2px;
  background-color: #5383ed;
}
</style>

<script>
import { download } from "@/api/analy";
import {
  getTypesByKey,
  getBusinessTableListJson,
  businessTableDel,
  synchronizationBusinessTable,
  businessTableRemove,
  businessTableRemoveEs,
} from "@/api/form";
import DataSource from "@/components/plug/DataSource";
import XrHeader from "@/components/XrHeader";

export default {
  name: "Task",
  components: {
    DataSource,
    XrHeader,
  },

  data() {
    return {
      multiple: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      baseUploadURL:
        process.env.VUE_APP_BASE_BPM_API +
        "form/bus/businessTable//importExcle",
      options: [
        {
          value: "inner",
          label: "内部",
        },
        {
          value: "external",
          label: "外部",
        },
      ],
      value: "",
      tableData: [],
      tableHeight: 450,
      queryDate: [],
      total: 0,
      chartVisible: false,
      chartData: {},
      sellerId: 0,
      shopName: [],
      queryForm: {
        groupId: "",
        modelName: "",
        type: "",
        description: "",
        tableName: "",
        page: 1,
        pageSize: 10,

        limit: 10,
      },
      multipleSelection: [],

      categoryData: [],
    };
  },
  mount() {
    this.getData();
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop;
  },
  created() {
    this.initData();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      if (res.code == 0) {
        this.getData();
        this.$message({
          duration: "800",
          message: "导入成功",
          type: "success",
          customClass: "zZindex",
        });
      } else {
        this.$message({
          duration: "800",
          message: "导入失败",
          type: "warning",
          customClass: "zZindex",
        });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = val.map((item) => item.id);
      this.single = val.length !== 1;
      this.multiple = !val.length;
    },
    synchronization() {
      synchronizationBusinessTable(this.multipleSelection).then((response) => {
        download(response, "业务实体");
      });
    },
    add: function (type) {
      if (type == "inner") {
        this.$router.push({
          name: "businessTableInnerAdd",
          query: { t: new Date().getTime(), operate: "inner" },
        });
      } else {
        this.$router.push({
          name: "businessTableInnerAdd",
          query: { t: new Date().getTime(), operate: "external" },
        });
      }
    },
    queryFormCreateTime: function (e) {
      this.queryForm.createTime = e;
    },
    refreshTask: function (data) {
      this.queryForm.page = 1;
      if (data[0].parentId == "-1") {
        this.queryForm.groupId = "";
      } else {
        this.queryForm.groupId = data[0].id;
      }

      this.getData();
    },
    queryMethod: function () {
      var name = this.queryForm.name;
      var whereSql = "";
      var createTime = this.queryForm.createTime;
      if (createTime) {
        if (createTime[0]) {
          whereSql =
            "  CREATE_TIME_  between '" +
            createTime[0] +
            "' and " +
            "'" +
            createTime[1] +
            "'";
        }
      }
      this.queryForm.whereSql = whereSql;
      getBusinessTableListJson(this.queryForm).then((response) => {
        this.tableData = response.data;
        this.total = response.count;
      });
    },
    getTypesByKeyAction: function () {
      getTypesByKey().then((response) => {
        this.categoryData = response.data;
      });
    },
    initData: function () {
      this.getTypesByKeyAction();
      this.getData();
    },
    getData: function () {
      getBusinessTableListJson(this.queryForm).then((response) => {
        this.tableData = response.data;
        this.total = parseInt(response.count);
      });
    },
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.getData();
    },
    handleClick(data) {
      this.$router.push({
        name: "businessTableInnerAdd",
        query: {
          t: new Date().getTime(),
          id: data.id,
          operate: data.type,
          edit: true,
        },
      });
    },
    handleDelete() {
      businessTableRemove({ ids: this.ids }).then((response) => {
        if (response.code == 0) {
          this.getData();
        } else {
          this.$message({
            duration: "800",
            message: response.msg,
            type: "warning",
            customClass: "zZindex",
          });
        }
      });
    },
    handleEs() {
      businessTableRemoveEs({ ids: this.ids }).then((response) => {
        if (response.code == 0) {
          this.$message({
            duration: 800,
            message: "同步成功",
            type: "success",
            customClass: "zZindex",
          });
        } else {
          this.$message({
            duration: "800",
            message: response.msg,
            type: "warning",
            customClass: "zZindex",
          });
        }
      });
    },

    handleDelClick(data) {
      businessTableDel(data.id).then((response) => {
        if (response.code == 0) {
          this.$message({
            duration: 800,
            message: "操作成功",
            type: "success",
            customClass: "zZindex",
          });

          this.getData();
        } else {
          this.$message({
            duration: 800,
            message: response.msg,
            type: "warning",
            customClass: "zZindex",
          });
        }
      });
    },
    search() {
      this.queryForm.page = 1;
      this.queryMethod();
    },
    reset() {
      this.queryForm.name = "";
      this.queryForm.createTime = "";
      this.queryForm.whereSql = "";
      this.queryForm.modelName = "";
      this.queryForm.description = "";
      this.queryForm.tableName = "";
      this.queryForm.type = "";

      this.queryDate = [];
      this.getData();
    },
  },
};
</script>
<style lang="scss">
.task-card {
  margin-top: 10px;
}
</style>
<style lang="scss" scoped>
/deep/ .el-upload-list__item {
  display: none; /* 上传按钮隐藏 */
}
</style>
<style lang="scss" scoped>
/* button color */
.el-button--cyan.is-active,
.el-button--cyan:active {
  background: #20b2aa;
  border-color: #20b2aa;
  color: #ffffff;
}

.el-button--cyan:focus,
.el-button--cyan:hover {
  background: #48d1cc;
  border-color: #48d1cc;
  color: #ffffff;
}

.el-button--cyan {
  background-color: #20b2aa;
  border-color: #20b2aa;
  color: #ffffff;
}

/* text color */
.text-navy {
  color: #1ab394;
}

.text-primary {
  color: inherit;
}

.text-success {
  color: #1c84c6;
}

.text-info {
  color: #23c6c8;
}

.text-warning {
  color: #f8ac59;
}

.text-danger {
  color: #ed5565;
}

.text-muted {
  color: #888888;
}

/* image */
.img-circle {
  border-radius: 50%;
}

.img-lg {
  width: 120px;
  height: 120px;
}

.avatar-upload-preview {
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;
  overflow: hidden;
}

/* 拖拽列样式 */
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}

.top-right-btn {
  position: relative;
  float: right;
}

.main-div {
  background-color: white !important;
}
</style>
